<template>
  <div class="pageIndex">
    <div id="header">
        <Header />
    </div>
    <div class="indexCon">
      <HeaderSide :defaultIndexs="defaultIndex" />
      <div class="container ">
        <div class="pageNews clearfix">
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <a >
                  <img src="../../static/images/index-p1.jpg" alt="">
                </a>
                <p>
                  <span><cite>1</cite>/ <em>5</em> </span>
                  <b>图解：“数读”习近平关于宣传思想工作最新指示</b>
                </p>
              </div>
            </div>
            <div class="swiper-button-prev"></div><!--左箭头-->
            <div class="swiper-button-next"></div><!--右箭头-->
          </div>
          <div class="indexNews">
            <dl class="dl1">
              <dt>
                <router-link :to="{path:'/article',query:{id:0}}">
                <a >潮起东方万象新</a>
                </router-link>
              </dt>
              <dd>
                <router-link :to="{path:'/article',query:{id:0}}">
                <a >评论员观察：激荡督查检查考核的正能量</a>
                </router-link>
              </dd>
              <dd>
                <router-link :to="{path:'/article',query:{id:0}}">
                <a >治理之道：锻造忠诚干净担当的高素质干部队伍</a>
                </router-link>
              </dd>
              <dd>
                <router-link :to="{path:'/article',query:{id:0}}">
                <a >为开创强军事业新局面提供坚强政治保证</a>
                </router-link>
              </dd>
            </dl>
            <dl class="dl2">
              <dt>
                <router-link :to="{path:'/article',query:{id:0}}">
                <a >增强大局意识才有大作为</a>
                </router-link>
              </dt>
              <dd>
                <router-link :to="{path:'/article',query:{id:0}}">
                <a > 《中国共产党纪律处分条例》系列学习辅导用书出版</a>
                </router-link>
              </dd>
              <dd>
                <router-link :to="{path:'/article',query:{id:0}}">
                <a >  用焦裕禄精神奏响新时代奋进曲</a>
                </router-link>
              </dd>
              <dd>
                <router-link :to="{path:'/article',query:{id:0}}">
                <a >苏州市吴中区：打造环太湖党建带 凝聚发展新动能</a>
                </router-link>
              </dd>
              <dd>
                <!--<router-link :to="{path:'/article',query:{id:0}}">-->
                <a >广州赤岗街道党工委书记赵虎:"小事"抓细 "大事"抓实</a>
                <!--</router-link>-->
              </dd>
            </dl>
          </div>
        </div>
        <div class="recommend">
          <p>
            <span>特别推荐</span>
          </p>
            <div class="scrollBar">
              <VueSeamlessScroll :class-option="optionLeft" class="seamless-warp2">
                <ul>
                  <li>
                    <a >
                      <img src="../../static/images/scroll1.jpg" alt="">
                      <p>
                        1111111
                      </p>
                    </a>
                  </li>
                  <li>
                    <a >
                      <img src="../../static/images/scroll2.jpg" alt="">
                      <p>
                        1111111
                      </p>
                    </a>
                  </li>
                  <li>
                    <a >
                      <img src="../../static/images/scroll3.jpg" alt="">
                      <p>
                        1111111
                      </p>
                    </a>
                  </li>
                </ul>
                <!--<div class="prevBtn">-->
                  <!--<a >-->
                    <!--<img src="../../static/images/left.png" alt="">-->
                  <!--</a>-->
                <!--</div>-->
                <!--<div class="nextBtn">-->
                  <!--<a >-->
                    <!--<img src="../../static/images/right.png" alt="">-->
                  <!--</a>-->
                <!--</div>-->
              </VueSeamlessScroll>
            </div>
        </div>
      </div>
    </div>
    <div class="latestNews">
      <div class="container">
        <div class="latestNewsTitle">
            <span>最新消息</span>
        </div>
        <div class="newsPart">
          <div class="newsDl">
            <dl>
              <dt>
               <span>中央精神</span>
              </dt>
              <dd>
                <router-link :to="{path:'/article',query:{id:0}}">
                  <a >
                    新知新觉：坚守新时代奋斗者的价值追求
                  </a>
                </router-link>
              </dd>
              <dd>
                <router-link :to="{path:'/article',query:{id:0}}">
                <a >
                  组织工作要处理好“七种关系”
                </a>
                </router-link>
              </dd>
              <dd>
                <router-link :to="{path:'/article',query:{id:0}}">
                <a >
                  治理者说：脱贫攻坚要激发“头雁效应”
                </a>
                </router-link>
              </dd>
              <dd>
                <router-link :to="{path:'/article',query:{id:0}}">
                <a >
                  以“双培工程”为载体 让党徽在税收…
                </a>
                </router-link>
              </dd>
            </dl>
          </div>
          <div class="newsDl">
            <dl>
              <dt>
                <span>中央精神</span>
              </dt>
              <dd>
                <router-link :to="{path:'/article',query:{id:0}}">
                <a >
                  新知新觉：坚守新时代奋斗者的价值追求
                </a>
                </router-link>
              </dd>
              <dd>
                <router-link :to="{path:'/article',query:{id:0}}">
                <a >
                  组织工作要处理好“七种关系”
                </a>
                </router-link>
              </dd>
              <dd>
                <router-link :to="{path:'/article',query:{id:0}}">
                <a >
                  治理者说：脱贫攻坚要激发“头雁效应”
                </a>
                </router-link>
              </dd>
              <dd>
                <router-link :to="{path:'/article',query:{id:0}}">
                <a >
                  以“双培工程”为载体 让党徽在税收…
                </a>
                </router-link>
              </dd>
            </dl>
          </div>
          <div class="newsDl">
            <dl>
              <dt>
                <span>中央精神</span>
              </dt>
              <dd>
                <router-link :to="{path:'/article',query:{id:0}}">
                <a >
                  新知新觉：坚守新时代奋斗者的价值追求
                </a>
                </router-link>
              </dd>
              <dd>
                <router-link :to="{path:'/article',query:{id:0}}">
                <a >
                  组织工作要处理好“七种关系”
                </a>
                </router-link>
              </dd>
              <dd>
                <router-link :to="{path:'/article',query:{id:0}}">
                <a >
                  治理者说：脱贫攻坚要激发“头雁效应”
                </a>
                </router-link>
              </dd>
              <dd>
                <router-link :to="{path:'/article',query:{id:0}}">
                <a >
                  以“双培工程”为载体 让党徽在税收…
                </a>
                </router-link>
              </dd>
            </dl>
          </div>
          <div class="newsDl">
            <dl>
              <dt>
                <span>中央精神</span>
              </dt>
              <dd>
                <router-link :to="{path:'/article',query:{id:0}}">
                <a >
                  新知新觉：坚守新时代奋斗者的价值追求
                </a>
                </router-link>
              </dd>
              <dd>
                <router-link :to="{path:'/article',query:{id:0}}">
                <a >
                  组织工作要处理好“七种关系”
                </a>
                </router-link>
              </dd>
              <dd>
                <router-link :to="{path:'/article',query:{id:0}}">
                <a >
                  治理者说：脱贫攻坚要激发“头雁效应”
                </a>
                </router-link>
              </dd>
              <dd>
                <router-link :to="{path:'/article',query:{id:0}}">
                <a >
                  以“双培工程”为载体 让党徽在税收…
                </a>
                </router-link>
              </dd>

            </dl>
          </div>


        </div>
      </div>
    </div>

    <div class="indexStudy">
      <div class="container">
        <div class="studyTitle">
            <span>学习</span>
        </div>
        <div class="studyScroll">
            <div>
                <ul>
                  <li>
                    <a >
                      <img src="../../static/images/study-1.jpg" alt="">
                      <p>

                        网上党校
                      </p>
                    </a>
                  </li>
                  <li>
                    <a >
                      <img src="../../static/images/study-2.jpg" alt="">
                      <p>
                        党章党规
                      </p>
                    </a>
                  </li>
                  <li>
                    <a >
                      <img src="../../static/images/study-3.jpg" alt="">
                      <p>
                        精神学习
                      </p>
                    </a>
                  </li>
                  <li>
                    <a >
                      <img src="../../static/images/study-4.jpg" alt="">
                      <p>
                        视频网校
                      </p>
                    </a>
                  </li>
                </ul>
            </div>
        </div>
      </div>
    </div>

    <div id="footer">
      <Footer />
    </div>

  </div>


</template>


<script>
import header from  '../components/header.vue'
import footer from '../components/footer.vue'
import headerSide from '../components/side.vue'
import vueSeamlessScroll from 'vue-seamless-scroll'
console.log(headerSide)
console.log(header)
  export default({
    data(){
        return {
          defaultIndex:0
        }
    },
    computed: {
      optionLeft () {
        return {
          direction: 2,
          limitMoveNum: 2
        }
      }
    },
    components:{
     Header:header,
      Footer:footer,
      HeaderSide:headerSide,
      VueSeamlessScroll:vueSeamlessScroll
    },
    methods:{
        getP(){
          this.axios.get('/home/index/getIndex')
            .then(function (res) {
              console.log(res.data)
            })
        },
      watchIndex(){
            console.log(123)
      }
    },
    mounted(){
//        this.getP()
      var swiper =new this.Swiper('.swiper-container',{
        autoplay:true,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      })
    }
  })
</script>
<style lang="stylus" scoped>
  .indexCon{
    padding-bottom 42px
    background-image:url("../../static/images/list.jpg");
    background-position: 0 0;
    background-repeat: no-repeat;
    height 700px
  }
  .indexCon .swiper-container{
    float left
    width 549px
    height 380px
  }
  .headerSide >>> .container{
      background white
    }
    .indexCon .container{
      background rgba(255,255,255,1)
    }
  .indexCon .swiper-container .swiper-slide p{
    position absolute
    left 0
    bottom 0
    width 100%
    height 50px
    background rgba(0,0,0,0.4)
    font-size 18px
    color white
    line-height 50px
  }

  .indexCon .swiper-container .swiper-slide p span cite,
  .indexCon .swiper-container .swiper-slide p span em
  {
    font-style normal
  }
.seamless-warp2 ul{
  overflow hidden
}
  .indexCon .swiper-container .swiper-slide p span{
    display inline-block
    width 56px
    height 100%
    vertical-align top
    margin-left 36px
  }
  .indexCon .swiper-container .swiper-slide p b{
    font-weight normal
    display inline-block
    width 400px
    word-break:keep-all;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    vertical-align top

  }
  .swiper-button-prev{
    background-image: url(../../static/images/prev.png)
  }
  .swiper-button-next{
    background-image: url(../../static/images/next.png)
  }

  .swiper-button-next, .swiper-button-prev {
    position: absolute;
    top 341px
    width: 13px;
    height: 23px;
    z-index: 10;
    cursor: pointer;
    background-size: 13px 23px;
    background-position: center;
    background-repeat: no-repeat;
    opacity 1
    z-index 99
    margin-top 0
    cursor pointer
  }
  .indexNews{
    width 461px
    float right
  }
  .indexNews dl{

    border-bottom 1px solid #dadada
    text-align left
  }
  .indexNews dl dt{
      font-size 24px
      font-weight bold
      color #000
      padding-top 8px
      margin-bottom 5px
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2
      padding-left 23px

  }
  .indexNews dl dt a{
    color #000
  }
  .indexNews dl dd>a{
    color #000
    padding-left 23px
  }
  .indexNews dl dd>a {
    padding-left 35px
    position relative
  }
  .indexNews dl dd a:before{
    position absolute
    left 25px
    top 50%
    content ""
    width 4px
    height 4px
    -webkit-border-radius -moz-border-radius
    border-radius 50%
    -moz-border-radius 50%
    background #cd0502
    margin-top -2px
  }
  .indexNews dl dd{
    word-break:keep-all
    white-space:nowrap
    overflow hidden;
    text-overflow:ellipsis
    font-size 16px
    color #000
    line-height 30px
  }
  .indexNews .dl1{
    height 179px
  }
  .indexNews .dl2{
      height 197px
  }

  .recommend p{
    text-align left
    padding 22px 0
  }
  .recommend span{
    position relative
    font-size 42px
    color #6d6d6d
    /*font-weight bold*/
    text-align left
    margin-left 5px
    font-weight bold
  }
  .recommend span:before{
    position absolute
    content ''
    right -60px
    top 50%
    width 58px
    height 3px
    margin-top -2px
    background #6d6d6d
  }
    .seamless-warp2{
      width 1013px
      height 185px
      overflow hidden
    }
  .scrollBar ul{
    /*width 2000px*/
  }
    .scrollBar>div{
      overflow hidden
      position relative
    }
  .scrollBar>div .prevBtn,
  .scrollBar>div .nextBtn{
      position absolute
      top 50%
      width 30px
      height 40px
      margin-top -20px
      background rgba(0,0,0,0.4)
    text-align center
  }
  .scrollBar>div .prevBtn{
     left 0
  }
  .scrollBar>div .nextBtn{
    right 0
  }
  .scrollBar>div .prevBtn img,
  .scrollBar>div .nextBtn img {
    width 14px
    height 23px
    margin-top 8px
  }
  .scrollBar ul li{
    float left
    width 308px
    height 185px
    position relative
    margin-right 44px
  }
  .scrollBar ul li img{
    width 308px
    height 148px

  }
  .scrollBar ul li p{
    position absolute
    text-align center
    font-size 16px
    color #000000
    height 37px
    line-height 37px
    background #ededed
    padding 0
    bottom 0px
    left  0
    width 100%
  }
  .latestNews{
    height 664px
    width 100%
    background #cd0401
  }
  .latestNews .latestNewsTitle,
  .indexStudy .studyTitle{
    padding 30px 0
    font-size 42px
    color #ffffff
    text-align left
    margin-bottom 10px
  }
  .latestNews .latestNewsTitle span,
  .indexStudy .studyTitle span{
    position relative
  }
  .latestNews .latestNewsTitle span:before,
  .indexStudy .studyTitle span:before{
    position absolute
    content ''
    right -84px
    top 50%
    width 78px
    height 3px
    margin-top -2px
    background #fff
  }
  .newsPart .newsDl{
    width 50%
    float left
    margin-bottom 40px
  }
  .newsPart .newsDl dl{
    width 422px
    height 211px
    padding-left 16px
    background rgba(0,0,0,0.2)
    margin  0 auto
    color white
    text-align left
    border-radius 3px
    -webkit-border-radius 3px
    -moz-border-radius 3px
  }
  .newsPart .newsDl dl dt{

  }
  .newsPart .newsDl dl dt  span{
    display inline-block
    position relative
    font-size 20px
    font-weight bold
    padding-top 14px
    padding-bottom 7px
    margin-bottom 14px
  }
  .newsPart .newsDl dl dt  span:before{
    position absolute
    left 0px
    bottom 0
    width 155px
    height 1px
    background white
    content ""

  }
  .newsPart .newsDl dl dd{
    line-height 32px
    font-size 16px
    color white
    word-break keep-all;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .newsPart .newsDl dl dd a{
    color white
  }
  .indexStudy{
    height 460px
    width 100%
    background #383c4b
  }
  .studyScroll{
    width 1008px
    height 251px
    margin  0 auto
  }
  .studyScroll li{
    float left
    width 252px
    height 251px
    position relative
    overflow hidden
  }
  .studyScroll li a{
    cursor pointer
  }
  .studyScroll li img:hover{
    transition ease 1.2s
    transform scale(1.1)

  }
  .studyScroll li img{
    width 252px
    height 251px
  }
  .studyScroll li  p{
      position absolute
      height 28px
      left 0px
      bottom 0px
      width 100%
      line-height 28px
      background rgba(0,0,0,0.4)


  }
  .studyScroll li a  p {
    color white
    font-size 18px
    color white
    text-align center
  }
</style>
